
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
let colors = document.querySelector('.colors')
let body = document.querySelector('body')
let draw = false;
let last;
let lineWidth = 5
let eraserEnabled = false;
let isTouchDevice = "ontouchstart" in document.documentElement;
setSize();
ctx.fillStyle = "black";
ctx.strokeStyle = "black";
ctx.lineWidth = lineWidth;
ctx.lineCap = "round";

window.onresize = () => {
  setSize();
  toDraw()
};
// console.log(isTouchDevice);
toDraw()

function toDraw(){
  if (isTouchDevice) {
    canvas.ontouchstart = (e) => {
      draw = true;
      last = [e.touches[0].clientX, e.touches[0].clientY];
    };
  
    canvas.ontouchmove = (e) => {
      if(eraserEnabled){
        let x = e.touches[0].clientX
        let y = e.touches[0].clientY
          ctx.clearRect(x - 55, y - 55, 10, 10)
  
          return 
        }
      
      drawLine(last[0], last[1], e.touches[0].clientX, e.touches[0].clientY);
      last = [e.touches[0].clientX, e.touches[0].clientY];
  
    };
  //   canvas.ontouchend = (e) => {
  //     draw = false;
  //   };
  }
  
  canvas.onmousedown = (e) => {
    draw = true;
    last = [e.clientX, e.clientY];
  };
  
  canvas.onmousemove = (e) => {
    if (draw === true) {
      // ctx.arc(e.clientX, e.clientY, 10, 0, 2 * Math.PI)
      if(eraserEnabled){
        let x = e.clientX
        let y = e.clientY
          ctx.clearRect(x - 55, y - 55, 10, 10)
  
          return 
        }
      drawLine(last[0], last[1], e.clientX, e.clientY);
      last = [e.clientX, e.clientY];
  
      // console.log(ctx.lineWidth);
    }
  };
  
  body.onmouseup = (e) => {
    draw = false;
  };
}

function drawLine(x1, y1, x2, y2) {
  ctx.beginPath();
  ctx.moveTo(x1-50, y1-50);
  ctx.lineTo(x2-50, y2-50);
  ctx.stroke();
  ctx.restore()
  ctx.closePath()
}

function setSize() {
  canvas.width = document.documentElement.clientWidth - 50;
  canvas.height = document.documentElement.clientHeight - 50;
}




black.onclick = function(){
  ctx.fillStyle= 'black'
  ctx.strokeStyle= 'black'
  black.classList.add('active')
  red.classList.remove('active')
  green.classList.remove('active')
  blue.classList.remove('active')
}

red.onclick = function(){
  ctx.fillStyle= 'red'
  ctx.strokeStyle = 'red'
  black.classList.remove('active')
  red.classList.add('active')
  green.classList.remove('active')
  blue.classList.remove('active')
}
green.onclick = function(){
  black.classList.remove('active')
  ctx.fillStyle= 'green'
  ctx.strokeStyle = 'green'
  red.classList.remove('active')
  green.classList.add('active')
  blue.classList.remove('active')


}
blue.onclick = function(){
  black.classList.remove('active')
  ctx.fillStyle= 'blue'
  ctx.strokeStyle = 'blue'
  red.classList.remove('active')
  green.classList.remove('active')
  blue.classList.add('active')
}
//切换颜色
thin.onclick = function(){
  lineWidth = 5;
  ctx.lineWidth = lineWidth;//线宽
}
thick.onclick = function(){
  lineWidth = 10;
  ctx.lineWidth = lineWidth;//线宽
}
pen.onclick = function(){
//click事件兼容移动端和pc
  eraserEnabled = false
  pen.classList.add('active')
  eraser.classList.remove('active')
  colors.style.display = 'block'
}
eraser.onclick = function(){
  eraserEnabled = true

  eraser.classList.add('active')
  pen.classList.remove('active')
  colors.style.display = 'none'
}
clear.onclick = function(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
}//清除图像
download.onclick = function(){
  var url =  canvas.toDataURL("image/png")

  var a = document.createElement('a')
  document.body.appendChild(a)
  a.href = url;
  a.download = '我的画'
  a.target = '_blank'
  a.click();
}


/***********/

